<template>
  <div>
    <div class='c-sidebar'>
      <div slot="top" class="logo-con" style="width:200px;height:80px;text-align:center;background:#272c32;border-bottom:solid 20px #21262a;">
        <img src="../assets/images/logo.png" style="margin-top:16px;"/>
      </div>
      <sidebar :navOption='navData'></sidebar>
    </div>

    <div class="main-container">
      <navbar></navbar>
    </div>
    <div class="view">
      <router-view></router-view>
    </div>

  </div>
</template>

<script>
  import { getToken } from '@/utils/auth'
  import { Navbar } from './layout/components'
  import Sidebar from './layout/components/Sidebar.vue'
  import { mapActions } from 'vuex'
  export default {
    name: 'layout',
    components: {
      Navbar,
      Sidebar
    },
    created() {
      this.brandOptions()
    },
    computed: {
      navData() {
        if (this.$store.getters.menu !== '') {
          return JSON.parse(this.$store.getters.menu)
        }
      }
    },
    methods: {
      ...mapActions([
        'brandOptions','GetMenu','GetBtn'
      ])
    }
  }
</script>

<style lang="scss" scoped>
  @import '../styles/mixin.scss';
  .app-wrapper {
    @include clearfix;
    position: relative;
    height: 100%;
    width: 100%;
    background:#e8ecef;
  }
  .c-sidebar {
    width: 200px;
    background: #21262a;
    overflow: auto;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 21;
    transition: width .3s;
  }
  .view {
    padding-left: 200px;
    transition: left .3s;
  }


</style>


